<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/ocr.css"/>
	</head>
	<body>
		<input type="button" name="" id="" value="点一下" onclick="fp()" style="margin-bottom: 100px;"/>
		<div id="fp" onmouseover="over()" onmouseout="out()" style="border: 2px solid grey; width: 5%;">
			<table border="" cellspacing="" cellpadding="">
				<tr><td>Data</td></tr>
				<tr><td>wuhu</td></tr>
				<tr><td>no</td></tr>
				<tr><td>kokoko</td></tr>
				<tr><td>opop</td></tr>
				<tr><td>vfv</td></tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		var flag=false;
		function fp(){
			var trArray=document.getElementsByTagName("tr");
			for (let i = 0; i < trArray.length; i++) {
				if(flag==true){
					// if(i%2==0){
					// 	trArray[i].style.backgroundColor="aquamarine"
					// }else{
					// 	trArray[i].style.backgroundColor="aqua"
					// }
					
					
					trArray[i].className="one"
					flag=false
				}
				else if(flag==false){
					// trArray[i].style.backgroundColor="white"
					
					
					trArray[i].className="two"
					flag=true
				}
			}
		}
		var oldClassName
		function over(){
			console.log("out")
			var bs=document.getElementsByTagName("tr")
			for (let i = 0; i < bs.length; i++) {
				// 为每个标签绑定上事件
				
				bs[i].onmouseover=function(){
					bs[i].className="one"
					oldClassName=this.className;
					console.log(this)
					this.className="hover"
					
				}
			}
		}
		function out(){
			console.log("over")
			var bs=document.getElementsByTagName("tr")
			for (let i = 0; i < bs.length; i++) {
				bs[i].onmouseout=function(){
					bs[i].className="two"
					console.log(this)
					this.className="hover"
					this.className=oldClassName
				}
			}
		}
		// 首先加载这个函数里的方法
		/* window.onload=function(){
			
		} */
	</script>
</html>
